<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>		
	
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
        <link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
	
        <script>
            // ctp.core.log.lvl=ctp.core.loglvl.info;            
            $(document).ready(function(){ 			                 
				var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: '没有图片',
                    width: '100%',
                    disabled: false                
                });
                var button2 = new ctp.ui.button({
                    id: 'button2',
                    text: '有图片',
                    width: '100%',
                    icon: 'save',
                    disabled: false           
                });
               
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '设置不可用',
                    width: '100%',
                    onClick: function(){
                        button1.setDisable(true);
                        button2.setDisable(true);
                    }
                });
                var button4=new ctp.ui.button({
                    id: 'button4',
                    text: '设置可用',
                    width: '100%',
                    onClick: function(){
                        button1.setDisable(false);
                        button2.setDisable(false);
                    }
                });
                var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '是否禁用',
                    width: '100%',
                    onClick: function(){                
						ctpMSB.alert({title:'信息提示',message:button1.isDisable()});
                    }
                });
               var button6= new ctp.ui.button({
                    id: 'button6',
                    text: '设置宽度',
                    width: '100%',
                    onClick: function(){
                        button1.setWidth('80px');
                        button2.setWidth('80px');
                    }
                });
                var button7=new ctp.ui.button({
                    id: 'button7',
                    text: '设置提示信息<提示>',
                    width: '100%',
                    onClick: function(){
                        button1.setTitle('提示');
                        button2.setTitle('提示');
                    }
                });
                var button8=new ctp.ui.button({
                    id: 'button8',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){
                        button1.hide();
                        button2.hide();
                    }
                });
                var button9=new ctp.ui.button({
                    id: 'button9',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                        button1.show();
                        button2.show();
                    }
                });
                var button10=new ctp.ui.button({
                    id: 'button10',
                    text: '设置点击事件',
                    width: '100%',
                    onClick: function(){
                        button1.onClick(
                            function(){
								ctpMSB.alert({title:'信息提示',message:"你点击了无图片按钮"});                                
                            }
                        );
                        button2.onClick(
                            function(){
								ctpMSB.alert({title:'信息提示',message:"你点击了有图片按钮"});                               
                            }
                       );
                    }
                });
                var button11=new ctp.ui.button({
                    id: 'button11',
                    text: '取消点击事件',
                    width: '100%',
                    onClick: function(){
                        button1.onClick(function(){});
                        button2.onClick(function(){});
                    }
                });
				var button12= new ctp.ui.button({
                    id: 'button12',
                    text: '设置按钮文本',
                    width: '100%',
                    onClick: function(){
                        button1.setText('设置文本1');
                        button2.setText('设置文本2');
                    }
                });
				var button13= new ctp.ui.button({
                    id: 'button13',
                    text: '取得两按钮ID',
                    width: '100%',
                    onClick: function(){						
						ctpMSB.alert({title:'信息提示',message:button1.getId()+","+button2.getId()});                       
                    }
                });
				var button14= new ctp.ui.button({
                    id: 'button14',
                    text: '取得两按钮名称',
                    width: '100%',
                    onClick: function(){
						ctpMSB.alert({title:'信息提示',message:button1.getName()+","+button2.getName()});						                        
                    }
                });
				var button15= new ctp.ui.button({
                    id: 'button15',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:button1.getCtpWebType()});                      
                    }
                });
				var button16= new ctp.ui.button({
                    id: 'button16',
                    text: '删除两按钮组件',
                    width: '100%',
                    onClick: function(){						  
						button1.remove();
						button2.remove();                      
                    }
                });
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '45%',
                    cols: 2,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: button1},{element: button2}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',						
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button3},{element: button4},{element: button5}],
						 [{element: button6},{element: button7},{element: button8}],
						 [{element: button9},{element: button10},{element: button11}],
						 [{element: button12},{element: button13},{element: button14}],
						 [{element: button15},{element: button16}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'button实例',
                    collapsible: true,
                    width: '550px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });            
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.button 实例</b>
        <hr/>
        <br/>  
    </BODY>
</html>
